<template>
  <Tree
    :data="treeData"
    :props="defaultProps"
    :default-expanded-keys="expandedKeys"
    node-key="id"
    highlight-current
    :highligh-color="highlighColor"
    :show-btn-group="showBtnGroup"
    :draggable="true"
    @node-click="nodeClick"
    @editNodeSubmit="addNode"
    @deleteNodeSubmit="deleteNode"
    @node-drag-end="handleDragEnd"
  />
</template>

<script>
import Tree from './tree.vue'
export default {
  components: {
    Tree
  },
  data() {
    return {
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      expandedKeys: [], // 展开节点
      highlighColor: {
        color: '#FFAE0D',
        bgColor: 'rgba(255, 174, 13, .1)'
      },
      showBtnGroup: true,
      treeData: [
        {
          id: 1,
          label: 'Node 1',
          children: [
            {
              id: 2,
              label: 'Node 1.1',
              children: [
                {
                  id: 3,
                  label: 'Node 1.1.1'
                },
                {
                  id: 4,
                  label: 'Node 1.1.2'
                }
              ]
            },
            {
              id: 5,
              label: 'Node 1.2'
            }
          ]
        },
        {
          id: 6,
          label: 'Node 2',
          status: true
        }
      ]
    }
  },
  methods: {
    /**
     * @param data 当前node节点数据
     * @param node node节点
     * @param component 当前组件本身
     */
    nodeClick(data, node, component) {
    },
    /**
     * @param node node节点
     * @param data 当前node节点数据
     * @param currentLabel 输入框的值
     * @param callback 回调函数
     */
    addNode({ node, data, currentLabel, callback }) {
      // 你调用后端接口，成功则callback传true，失败则传false
      callback(true)
    },
    /**
     * @param node node节点
     * @param data 当前node节点数据
     * @param callback 回调函数
     */
    deleteNode({ node, data, callback }) {
      // 你调用后端接口，成功则callback传true，失败则传false
      callback(true)
    },
    /**
     * @param beDrag 被拖拽节点对应的 Node
     * @param toDrag 结束拖拽时最后进入的节点
     * @param position 被拖拽节点的放置位置(before、after、inner)
     * @param event event事件
     */
    handleDragEnd(beDrag, toDrag, position, event) {
    }
  }
}
</script>
